<template>
  <div>
    <h1>管理员管理</h1>
    <div class="actions">
      <el-button type="primary" round plain @click="dialog.visible = true">新增管理员</el-button>
    </div>
    <el-divider></el-divider>
    <el-table :data="adminList">
      <el-table-column prop="id" label="序号" min-width="80"></el-table-column>
      <el-table-column prop="avatar" label="头像" min-width="120">
        <template v-slot="{ row }">
          <img :src="baseUrl + row.avatar" style="height: 60px;" alt="">
        </template>
      </el-table-column>
      <el-table-column prop="username" label="账号" min-width="120"></el-table-column>
      <el-table-column prop="phone" label="手机号" min-width="120"></el-table-column>
      <el-table-column prop="rolename" label="所属角色" min-width="120"></el-table-column>
      <el-table-column prop="status" label="状态" min-width="120">
        <template v-slot="{ row }">
          <!-- {{ row.status }} -->
          <el-tag type="primary" v-if="row.status === 1">启用</el-tag>
          <el-tag type="danger" v-else>禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="180">
        <template v-slot="{ row }">
          <el-button @click="edit(row)" type="primary" plain size="small" round>编辑</el-button>
          <el-button @click="del(row.id)" type="danger" plain size="small" round>删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <el-pagination @size-change="sizeChange" :page-sizes="[2, 5, 10, 15, 20]" @current-change="pageChange" background
      layout="pre,pager,next,sizes,jumper" :total="adminTotal" v-model:page-size="size"></el-pagination>

    <AdminDialog @updateAdmin="updateAdmin" style="min-width: 300px;" ref="dialog" />
  </div>
</template>

<script setup>
import AdminDialog from './AdminDialog.vue';
import { getAdminList, getAdminTotal, adminRemove } from '@/utils/api'
import { onMounted, ref } from 'vue'
const adminList = ref([])
const adminTotal = ref(0)
const page = ref(1)
const size = ref(5)
const dialog = ref(null)
const getAdminListAction = async () => {
  const { data } = await getAdminList({ page: page.value, size: size.value })
  if (data.code === 200) {
    adminList.value = data.data
  }
}
const getAdminTotalAction = async () => {
  const { data: countData } = await getAdminTotal({ page: page.value, size: size.value })
  adminTotal.value = countData.data
}
const updateAdmin = () => {
  getAdminListAction({ page: page.value, size: size.value })
  getAdminTotalAction()
}
onMounted(async () => {
  updateAdmin()
})


const pageChange = (num) => {
  page.value = num
  // 重新发送请求
  getAdminListAction({ page: page.value, size: size.value })
}
const sizeChange = (num) => {
  size.value = num
  // 重新发送请求
  getAdminListAction({ page: page.value, size: size.value })

}

const edit = (row) => {
  dialog.value.getEditData(row)
}

const del = (id) => {
  ElMessageBox.confirm('确认删除', '确认提示', { type: 'warning' }).then(async () => {
    const { data } = await adminRemove(id)
    ElMessage({ message: data.msg, type: data.code === 200 ? 'success' : 'error' })
    if (data.code === 200) {
      updateAdmin()
    }
  }).catch(() => null)
}

</script>

<style></style>